<template>
  <div class="add-pic-btn">
    <div class="add-pic-btn-inner">
      <div class="add-icon">+</div>
      <span class="btn-text">添加图片</span>
    </div>
    <label class="upload-button-trigger-label" for="" ></label>
    <form action="" class="upload-button-form" enctype="multipart/form-data">
      <input @click="bindLocalImg" id="imgLocalFile" type="file" accept="image/jpg,image/jpeg,image/png"/>
    </form>
  </div>
</template>
<script>
export default {
  props: {
    // userName: {
    //   type: String,
    //   required: true
    // }
  },
  data() {
    return {};
  },
  methods: {
    bindLocalImg(){
      let vm = this;
      let imgFile = document.getElementById('imgLocalFile');
      imgFile.addEventListener('change',readFile);
      function readFile() {
          for(let i=0;i<this.files.length;i++){
            console.dir(this.value);
            // vm.imgFile.push(this.files[i]);
            // vm.$emit('onloade',vm.imgFile);
            // let reader = new FileReader();
            // reader.readAsDataURL(this.files[i]);
            // reader.onload = function(e){
            //     vm.imgBase.push(this.result);
            //     imgFile.removeEventListener('change',readFile)
            // }
          }
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.add-pic-btn{
  width: 110px;
  height: 110px;
  background-image: none;
  background-color: #f8f9fe;
  border: 1px solid #e6e8f4;
  text-align: center;
  cursor: pointer;
  position: relative;
  outline: 0;
  margin: 0 auto;
  .add-pic-btn-inner{
    line-height: 1;
    margin-top:28px;
    .add-icon{
      line-height: 25px;
      font-size:42px;
      color: #e6e8f4;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 auto 14px;
    }
    .btn-text{
      margin: 0 auto;
      font-size: 12px;
      color:#999;
    }
  }
  .upload-button-form{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    #imgLocalFile{
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer;
      z-index:99;
    }
  }
}
</style>
